<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">技术博客</block>
		</cu-custom>
		<view class="padding">
			<view class="title  u-border-bottom">
				<view class="text-title text-bold">{{ article.title }}</view>
				<view class="padding-bottom-sm margin-top-sm flex">
					<u-icon
						name="clock"
						size="20"
						color=""
						:label="$u.timeFormat(new Date(article.createTime).getTime(), 'yyyy-mm-dd') || '' + ' /'"
						class="margin-right-sm"
					></u-icon>
					<u-icon name="eye" size="20" color="" :label="article.readNum || 0 + ' /'" class="margin-right-sm"></u-icon>
					<u-icon name="chat" size="20" color="" :label="article.commentSum || 0"></u-icon>
					<view class="flex   padding-left"  >
						<view v-for="(tag,i) in article.yrTags"  class="cu-tag light sm radius margin-right-sm" :class="tag.color=='primary'?'bg-blue':tag.color=='success'?
						'bg-olive':tag.color=='warning'?'bg-orange':tag.color=='error'?'bg-red':tag.color=='#8b54d4'?'bg-purple':tag.color=='#434344'?'bg-grey':'bg-cyan'">{{tag.name}}</view>
					</view>
				</view>
			</view>
			
			<u-image  height="260rpx" border-radius="10rpx" :src="article.cover"></u-image>

			<!-- <view class="desc-info margin-top padding">{{ article.description }}</view> -->

			<view class="margin-top">
				<view class="ql-container ql-snow">
					<view class="ql-editor">
						<!-- <u-parse :html="article.contentFormat" :use-anchor="true" :autosetTitle="true" 
						:selectable="true" :show-with-animation="true" :tag-style="tagStyle"></u-parse> -->
						<jyf-parser :html="article.contentFormat" ref="article" :tag-style="tagStyle"></jyf-parser>
					</view>
				</view>
			</view>
			<u-gap height="80"></u-gap>
			<share :article="article"></share>
			<u-gap height="60"></u-gap>
			<comment :articleId="articleId"></comment>
		</view>
	</view>
</template>

<script>
import comment from '@/components/yr/comment/comment.vue'
import jyfParser from "@/components/plugins/jyf-parser/jyf-parser.vue"; 
import share from '@/components/yr/share/share.vue'
export default {
	components:{
		comment,jyfParser,share
	},
	data() {
		return {
			articleId:'',
			article: {},
			tagStyle:{
					li:'font-size:24rpx;color:#585858;text-indent: 15rpx;font-weight:600'
			    }
		};
	},
	onLoad(option) {
		this.articleId = option.id;
		this.getArticle(option.id);
		wx.showShareMenu({
			withShareTicket:true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus:["shareAppMessage","shareTimeline"]
		})
	},
	//发送给朋友
	onShareAppMessage(res) {
		// 此处的distSource为分享者的部分信息，需要传递给其他人
		return {
			title: this.article.title,
			type: 0,
			path: '/pages/home/article_content/article_content?id='+this.article.id,
			summary: "",
			imageUrl: this.article.cover
		}
	},
	//分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.article.title,
			type: 0,
			query: 'id='+this.article.id,
			summary: "",
			imageUrl: this.article.cover
		}
	},
	methods: {
		getArticle(id) {
			this.$u.api.getArticle(id).then(res => {
				this.article = res.data;
			});
		}
	}
};
</script>
<style lang="stylus">
page
	background #FFFFFF
.title
	.text-title
		font-size 44rpx
.desc-info
	background #9ccc65 
	border-radius 10rpx
	color #fff
	font-size 30rpx
.ql-editor
	font-size 28rpx
	line-height 1.5
.ql-container.ql-snow
	border 0
.ql-snow .ql-editor .ql-syntax
	padding 32rpx
	color #ddd
	font-family Operator Mono, Consolas, Monaco, Menlo, monospace
	padding-top 30rpx
	background #272822
	border-radius 5px
	box-shadow rgba(0, 0, 0, 0.55) 0px 2px 10px
	overflow scroll

/* 优化显示样式 */	
.ql-editor
	.view, text, rich-text
		font-size 28rpx
		line-height 1.5em
		letter-spacing 3rpx
		color #393939
.ql-editor ._ul-p1 
	width 0.4em
	height 0.4em
.ql-editor	.__h2
	line-height 3em
	padding-top 20rpx
.ql-editor	.__h3
	line-height 3em
.ql-editor	.__h4
	line-height 2em
.ql-editor .__blockquote
	margin 20rpx 10rpx
.ql-editor 	.__pre
	font-size 24rpx
	

._ul-bef {
    margin: 0!important;
}
.__ul,.__ol{
	line-height 1.8em!important
}	
.interlayer view
	text-indent 0!important
</style>
